﻿@model DataAccess.DTO.ProductDetail
@{
    string id = ViewBag.aid as string;
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <link href="http://tjd.oss-cn-beijing.aliyuncs.com/p.css" rel="stylesheet" />
    <script type="text/javascript" src="http://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
    <title>@Model.title</title>
    <script>
        var deviceWidth = document.documentElement.clientWidth; if (deviceWidth > 750) deviceWidth = 750; document.documentElement.style.fontSize = deviceWidth / 7.5 + "px"; document.documentElement.style.width = "100%"; var deviceWidth = document.documentElement.clientWidth; if (deviceWidth > 750) deviceWidth = 750; !function (N, M) { function L() { var a = I.getBoundingClientRect().width; a / F > 540 && (a = 540 * F); var d = a / 10; I.style.fontSize = d + "px", D.rem = N.rem = d } var K, J = N.document, I = J.documentElement, H = J.querySelector('meta[name="viewport"]'), G = J.querySelector('meta[name="flexible"]'), F = 0, E = 0, D = M.flexible || (M.flexible = {}); if (H) { var C = H.getAttribute("content").match(/initial\-scale=([\d\.]+)/); C && (E = parseFloat(C[1]), F = parseInt(1 / E)) } else { if (G) { var B = G.getAttribute("content"); if (B) { var A = B.match(/initial\-dpr=([\d\.]+)/), z = B.match(/maximum\-dpr=([\d\.]+)/); A && (F = parseFloat(A[1]), E = parseFloat((1 / F).toFixed(2))), z && (F = parseFloat(z[1]), E = parseFloat((1 / F).toFixed(2))) } } } if (!F && !E) { var y = N.navigator.userAgent, x = (!!y.match(/android/gi), !!y.match(/iphone/gi)), w = x && !!y.match(/OS 9_3/), v = N.devicePixelRatio; F = x && !w ? v >= 3 && (!F || F >= 3) ? 3 : v >= 2 && (!F || F >= 2) ? 2 : 1 : 1, E = 1 / F } if (I.setAttribute("data-dpr", F), !H) { if (H = J.createElement("meta"), H.setAttribute("name", "viewport"), H.setAttribute("content", "initial-scale=" + E + ", maximum-scale=" + E + ", minimum-scale=" + E + ", user-scalable=no"), I.firstElementChild) { I.firstElementChild.appendChild(H) } else { var u = J.createElement("div"); u.appendChild(H), J.write(u.innerHTML) } } N.addEventListener("resize", function () { clearTimeout(K), K = setTimeout(L, 300) }, !1), N.addEventListener("pageshow", function (b) { b.persisted && (clearTimeout(K), K = setTimeout(L, 300)) }, !1), "complete" === J.readyState ? J.body.style.fontSize = 12 * F + "px" : J.addEventListener("DOMContentLoaded", function () { J.body.style.fontSize = 12 * F + "px" }, !1), L(), D.dpr = N.dpr = F, D.refreshRem = L, D.rem2px = function (d) { var c = parseFloat(d) * this.rem; return "string" == typeof d && d.match(/rem$/) && (c += "px"), c }, D.px2rem = function (d) { var c = parseFloat(d) / this.rem; return "string" == typeof d && d.match(/px$/) && (c += "rem"), c } }(window, window.lib || (window.lib = {}));
    </script>
</head>
<body>
    <div class="model-mask">
        <img src="http://0d077ef9e74d8.cdn.sohucs.com/qn4Pkgq_png" />
    </div>
    <div class="main" id="mainall" style="max-width:640px">
        <a href="javascript:void(0);" onclick="$('.scroll-wrapper').empty();history.go(-1);" style="position:fixed;top:15px;left:15px;z-index:99999">
            <img src="http://0d077ef9e74d8.cdn.sohucs.com/qnrKvNl_png" style="width:35px">
        </a>
        <a href="/shop/@(id).html" style="position:fixed;top:15px;right:15px;z-index:99999">
            <img src="http://0d077ef9e74d8.cdn.sohucs.com/qnrK5hU_png" style="width:35px">
        </a>
        <a href="javascript:" class="nb-camera">
            <img src="http://0d077ef9e74d8.cdn.sohucs.com/qnrKblx_png" style="width:35px">
        </a>
        <div class="goodsopenview">
            <div class="swiper-container">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <a href="javascript:;">
                            <div class="allpreContainer">
                                <img class="preloadbg" src="@(Model.pictUrl)_400x400.jpg" style="width:100%;height:100%" id="@(Model.pictUrl)">
                                <div id="qrcode" class="showqrcode" onclick="$('#qrcode').fadeOut(300);"></div>
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="swiper-pagination"></div>
            </div>
            <div class="goodsname">@Model.title</div>
            <p class="stat">
                <span style="margin-right:20px;">
                    销量：<span>@Model.biz30day</span>
                </span>
                <span>淘宝价&nbsp;</span>
                <span style="text-decoration: line-through;">¥ @Model.zkPrice</span>
                <span class="platform  taobao"></span>
            </p>
            <div class="price-area">
                <span class="qhj">券后价</span> <span class="yen">¥</span><span class="price number-font">@(Model.zkPrice-Model.couponAmount)</span>
                <span class="count-price-bgm count-price"><span>@(Model.couponAmount)元</span><s>优惠券</s></span>
            </div>
        </div>
        <div class="goodsshow" style="display:block" id="tabtxtthis">
            <a class="seemore" href="javascript:;" id="nbmore" data-id="@Model.auctionId" nbok='0'>
                <span id="tabtxt" class="jump">商品图文详情（点击查看）</span>
            </a>
            <div class="goodsdetail">

                <p style="padding-bottom: 10px; font-size: 13px; color: #444;   ">
                    @Model.Introduce
                </p>
                <div id="product-details" class="">
                    <div class="am-panel-bd am-padding-0" style="border-top: 0">
                        <div class="am-tab-panel am-fade am-in am-active" id="tab1" style="padding-top:0px;margin-left:-10px;padding-left:10px;padding-right:10px;display:none">
                            <div class="am-padding-top-sm" style="width:100%;overflow:auto;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="normal item-recommend clear goodsshow" style="padding-bottom:30px;margin-top:-35px;display:block" id="cnxh">
            <a class="seemore" href="javascript:;"><span>同类宝贝</span></a>
            <div class="scrollview"><div class="zebra-bd" id="item" style="margin-top:0.333333rem"></div></div>
        </div>
        <div class="nbmenu">
            <div class="nbnav nb-btn1"><a href="/shop/@(id).html"><img src="http://0d077ef9e74d8.cdn.sohucs.com/qn3Aj6t_png" width="12px" height="12px" />&nbsp;首页</a></div>
            <div class="nbnav nb-btn2"><img src="http://0d077ef9e74d8.cdn.sohucs.com/qn3AyCE_png" width="12px" height="12px" />&nbsp;客服</div>
            <div class="nbnav2 nb-btn3"><a style="color:white" href="javascript:" onclick="openjump();">浏览器打开</a></div>
            <div class="nbnav2 nb-btn4"><a href="javascript:;" data-tkl="" data-url="" data-id="@Model.auctionId" data-activityid="@Model.couponActivityId" class="goodsget" data-title="@Model.title" data-price="@(Model.zkPrice-Model.couponAmount)">购买</a></div>
        </div>
    </div>
    <div class="nb-sharecanvas" style="display:none">
        <div class="nb-canvas">
            <i class="am-icon-close" style="display:none"></i>
            <canvas id="sharecanvas" style="background-color:white;display:none; width:80%" class="am-text-center am-center"></canvas>
            <img src="" class="imgData" />
            <div class="nb-canvas-explain am-text-sm nb-text-white am-margin-top-sm am-padding-xs">
                <span class="image_loading" style="display:none;color:#fff;font-size:13px;line-height:15px;padding-top:10px;padding-bottom:10px;text-align:center"><i></i>图文合成中，请耐心稍等片刻</span>
                <span class="image_show" style="color:#fff;font-size:13px;text-align:center">  说明：长按上方图片发给朋友或保存图片。</span>
            </div>
        </div>
    </div>
    <div class="com_mask" id="mask">
        <div class="mask_box">
            <p class="mask_top">长按复制</p>
            <div class="mask_info border_all">
                <p id="mask_title"></p>
                <div class="copy_success" id="copy_success">
                    <p><i class="base_icons base_success"></i>已复制成功</p>
                </div>
            </div>
            <div class="mask_btn">
                <a class="com_btn" href="javascript:;" id="copy_kl" data-clipboard-text="">点击复制</a>
            </div>
            <p class="mask_tip">复制 → 打开手机淘宝 → 即可下单</p>
        </div>
        <a href="javascript:;" class="mask_close" id="mask_close"><i class="base_close base_icons"></i></a>
    </div>                                
    <input type="hidden" id="buyUrl" value="https://uland.taobao.com/coupon/edetail?tj1=1&tj2=1&activityId=@(Model.couponActivityId)&itemId=@(Model.auctionId)&pid=@(ViewBag.Site_Pid as string)&dx=1" />
    
    <input type="hidden" id="aid" value="@(id)" />
    @Html.Hidden("title",Model.title)
    @Html.Hidden("imgurl",Model.pictUrl)
    @Html.Hidden("cid", Model.DataTypeID)
   @Html.Hidden("p1",Model.zkPrice)
    @Html.Hidden("p2", Model.prices.ToString("F2"))
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
    <script src="https://cdn.bootcss.com/clipboard.js/1.6.1/clipboard.min.js"></script>
    <script src="http://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
    <script type="text/javascript">
        var aid = $("#aid").val();
        //关闭弹窗
        function closeMask() {
            $('#mask_close').on('click', function () {
                $('#mask').hide();
            });
        }

        function openjump()
        {
            $('.model-mask').show();
        }
        function isWx() {
            if (navigator.userAgent.indexOf('MicroMessenger') > -1) {
                return true;
            }
            return false;
        }

        var camera = 1;
     
        $(function ()
        {
            $('.model-mask').on('click', function () {
                $('.model-mask').hide();
            });
           
            if (!isWx())
            {
                window.location.href = $('#buyUrl').val();
               
            } 
            var $copyBtn = $('#copy_kl'),
                $mask = $('#mask'),
                $copySuccess = $('#copy_success'),
                $title = $('#mask_title');
            //点击复制
            $copyBtn.on('click', function ()
            { 
                var clipboard = new Clipboard('#copy_kl', {
                    text: function(trigger) {
                        return $copyBtn.data("clipboard-text");
                             }
                       });
                $copySuccess.show();
                setTimeout(function ()
                {
                    $copySuccess.hide();
                }, 1500);

            });
            var id = $(".goodsget").data('id'), ActivityId = $(".goodsget").data('activityid');
            //关闭遮罩
            closeMask();
            //点击获取再弹窗
            $(".goodsget").click(function ()
            {
                var $that = $(this),
                   waiting = false;
                if ("" == $that.data('tkl')) {
                    if (waiting) {
                        return false;
                    }
                    waiting = true;
                    $.ajax({
                        url: "/" + aid + "/GetKouling.html",
                        data: {id:id,ActivityId:ActivityId},
                        type: "POST",
                        success: function (data) {
                            $that.data('tkl', data.kouling);
                            waiting = false;
                           // if (isWx()) {
                                var tkl = $that.data('tkl'),
                                    value = '';
                                //没有
                                if (tkl == '' || typeof tkl === 'undefined') {
                                    window.location.href = $that.data('url');
                                    return false;
                                }
                                //if (isprice == 'noPrice') {
                                   // value = '【' + $that.data('title') + '】复制这条信息，打开手机淘宝' + tkl;
                                //} else {
                                    value = '【' + $that.data('title') + '，券后' + $that.data('price') + '元包邮】复制这条信息，打开手机淘宝' + tkl;
                               // }
                                //配置数据
                                $title.html(value);
                                $copyBtn.data('clipboard-text', value);
                                var clipboard = new Clipboard('#copy_kl');
                                //不支持复制
                                clipboard.on('error', function (e) {
                                 
                                    $copyBtn.remove();
                                    $('.mask_top').show();
                                });
                                $mask.show();
                            //} else {
                                //不是微信直接跳转
                               // window.location.href = $that.data('url');
                           // }
                        },
                        error: function () {
                            waiting = false;
                            promptPop({ content: '系统繁忙,请重试' });
                        }
                    });
                    return false;
                }
                //已经有再弹窗
                //if (isWx()) {
                var tkl = $that.data('tkl');
                //没有
                //if (tkl == '' || typeof tkl === 'undefined') {
                //    window.location.href = $(this).data('url');
                //    return false;
                //}

                var value = '【' + $that.data('title') + '，券后' + $that.data('price') + '元包邮】复制这条信息，打开手机淘宝' + tkl;
                //配置数据
                $title.html(value);
                $copyBtn.data('clipboard-text', value);
           
                var clipboard = new Clipboard('#copy_kl');
                //不支持复制
                clipboard.on('error', function (e) {
                    $copyBtn.remove();
                    $('.mask_top').show();
                });
                $mask.show();
                // } else {
                //不是微信直接跳转
                //window.location.href = $(this).data('url');
                // }
            })

            //点击查看详情
            $(document).delegate("#nbmore", "click", function () {
                var $thisid = $(this);
                var itemid = $thisid.data("id");
                var nbok = $thisid.attr("nbok");
                if (nbok == 1) {
                    $("#tabtxt").html('商品图文详情（点击查看）');
                    setTimeout('$("html,body").animate({scrollTop:$(".allpreContainer").offset().top},500);', 500);
                    $('.am-tab-panel').hide();
                    $("#nbmore").attr('nbok', '0');
                    return false;
                }
                $("#tabtxt").removeClass('jump');
                $("#nbmore").attr('nbok', '1');
                $("#tab1").fadeIn();
                $("#tabtxt").html('商品图文详情');
                $("#nbmore").css('text-decoration', 'none');
                setTimeout('$("html,body").animate({scrollTop:$("#tabtxtthis").offset().top},500);', 500);
                $.ajax({
                    url: "https://hws.m.taobao.com/cache/mtop.wdetail.getItemDescx/4.1/?data=%7Bitem_num_id%3A" + itemid + "%7D&type=jsonp&dataType=jsonp",
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    success: function (result) {
                        if (result.ret[0] == "SUCCESS::接口调用成功") {
                            var len = result.data.images.length;
                            var image = new Array();
                            for (var i = 0; i < len; i++) {
                                image[i] = "<img src='" + result.data.images[i] + "' style='width:100%;max-width:100%'>";
                            }
                            $('.am-tab-panel').show();
                            $('.am-tab-panel').html(image);
                        }
                    }
                });
            });
            //判断是否还有优惠券
            var nbyhqurl = "https://uland.taobao.com/cp/coupon?activityId=" + ActivityId + "&itemId="+id+"&af=1";
            $.ajax({
                url: nbyhqurl,
                dataType: 'jsonp',
                jsonp: 'callback',
                success: function (result) {
                    var nbyhqstatus = result.result.retStatus;
                    if (nbyhqstatus > 0 && !isNaN(nbyhqstatus)) {
                        $('#qplus_yl').html('0');
                        $('#qplus_ylbili').html('0');
                        $('#qplus_lq').css('width', '100%');
                  
                        layer.msg('手慢了，优惠券已被抢光,您可以浏览器打开直接购买！');
                    }
                }
            });
            $.ajax({
                url: '/' + aid + '/getProductList.html',
                type: 'Post',
                dataType: 'json',
                data: {
                    'cid': $("#cid").val()
                },
                beforeSend: function () {
                },
                success: function (data) {
                    if (data.rows != null) {
                        var html = "";
                        var d=data.rows;
                        for (var i = 0; i <d.length ; i++) {
                            html = html + ("<a href=\"/" + aid + "/goods/" + d[i].auctionId + ".html\"><div class=\"item\"><div class=\"itemImg\"><img class=\"lazy\" data-original=\"" + d[i].pictUrl + "\"></div><div class=\"intro\"><span>包邮</span><b>券</b>" + d[i].title + "</div><p class=\"price1\"><span class=\"quan\">" + d[i].couponAmount + "元券</span><span class=\"prices\">到手价￥" + (d[i].zkPrice - d[i].couponAmount).toFixed(1) + "</span></p><div class=\"particulars\"><span class=\"shop\">" + (d[i].userType == "1" ? "天猫商城" : "淘宝商城") + "</span><span class=\"embranchment\"></span></div></div></a>");
                       
                        }
                        $("#item").html(html);
                        $("img.lazy").lazyload({
                            placeholder: "http://0d077ef9e74d8.cdn.sohucs.com/qn3wYuN_gif"
                        });
                    }
                }
            });
            
            //判断浏览器
            //var ua = navigator.userAgent.toLowerCase();
            //if (ua.match(/iphone/i) == "iphone") {
            //    var iphoneInfo = ua.match(/iphone os (\d{1,})/i);
            //    var iosVersion = iphoneInfo[1];
            //    if (iosVersion < 9) {
            //        camera = 0;
            //    }
            //}
            //获取推广图片
            $(".nb-camera").click(function () {
                if (camera == 1) {
                    if ($('.imgData').attr('src') == "") {
                        $('.image_loading').show();
                        $('.image_show').hide();
                    }
                    canvasApp();
                    $(".nb-sharecanvas").css("display", "flex");
                }
            });
            $(".nb-canvas .am-icon-close").click(function () {
                $(".nb-sharecanvas").css("display", "none");
            });
        });

        function canvasApp() {
            repic = $("#imgurl").val();
            reurl = "/"+aid+"/QRImg.html?url=" +window.location.href;
            var canvas = document.getElementById('sharecanvas');
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "#fff";
            canvas.width = (document.documentElement.clientWidth * 0.9) * 2;
            canvas.height = canvas.width / 2 + 680;
            var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            for (var i = 0; i < imageData.data.length; i += 4) {
                if (imageData.data[i + 3] == 0) {
                    imageData.data[i] = 255;
                    imageData.data[i + 1] = 255;
                    imageData.data[i + 2] = 255;
                    imageData.data[i + 3] = 255;
                }
            }
            ctx.putImageData(imageData, 0, 0);
            var item_img = new Image();
            item_img.setAttribute('crossOrigin', 'anonymous');
            item_img.src = repic;
            item_img.onerror = function () {
                $('.image_loading').hide();
                $('.image_show').hide();
                $('.nb-sharecanvas').hide();
                return false;
            }
            item_img.onload = function () {
                ctx.drawImage(item_img, 0, 0, canvas.width, canvas.width);
                var code_img = new Image()
                code_img.setAttribute('crossOrigin', 'anonymous');

                code_img.src = reurl;
                code_img.onerror = function () {
                    $('.image_loading').hide();
                    $('.image_show').hide();
                    $('.nb-sharecanvas').hide();
                    return false;
                }
                code_img.onload = function () {
                    ctx.drawImage(code_img, canvas.width - 220, canvas.width + 20, 200, 200);
                    var str = $("#title").val();
                    ctx.fillStyle = 'inherit';
                    ctx.lineWidth = 1;
                    ctx.textAlign = 'left';
                    ctx.textBaseline = "top";
                    ctx.font = '30px Helvetica';
                    var lineWidth = 0;
                    var canvasWidth = canvas.width - 60;
                    var initHeight = canvas.width + 30;
                    var lastSubStrIndex = 0;
                    for (var i = 0; i <= str.length; i++) {
                        lineWidth += ctx.measureText(str[i]).width;
                        if (lineWidth > canvasWidth - 230) {
                            ctx.fillText(str.substring(lastSubStrIndex, i), 20, initHeight);
                            initHeight += 40;
                            lineWidth = 0;
                            lastSubStrIndex = i;
                        }
                        if (i == str.length - 1) {
                            ctx.fillText(str.substring(lastSubStrIndex, i + 1), 20, initHeight);
                        }
                    }
                    var price = "原价："+$("#p1").val();
                    ctx.fillStyle = '#757380;';
                    ctx.textAlign = 'left';
                    ctx.font = '30px Helvetica';
                    ctx.textBaseline = "top";
                    ctx.fillText(price, 20, initHeight + 30);
                    ctx.strokeStyle = '#757380;';
                    ctx.lineWidth = 2;
                    ctx.moveTo(20, initHeight + 46);
                    ctx.lineTo(200, initHeight + 46);
                    ctx.stroke();
                    
                    var end_price_title = "券后价:";
                  
                    ctx.font = "bold 30px Arial"
                    ctx.fillStyle = "#FF3C29"
                    ctx.textAlign = 'left';
                    //ctx.font = '30px Helvetica';
                    ctx.textBaseline = "top";
                    ctx.fillText(end_price_title, 20, initHeight + 80);
                    var end_price = $("#p2").val();
                    ctx.fillStyle = '#FF3C29';
                    ctx.textAlign = 'left';
                    ctx.font = '42px Helvetica';
                    ctx.textBaseline = "top";
                    ctx.fillText(end_price, 120, initHeight + 72);
                    ctx.setLineDash([10, 5]);
                    ctx.lineWidth = 1;
                    ctx.strokeStyle = '#aba0ac';
                    ctx.beginPath();
                    ctx.moveTo(10, canvas.height - 50);
                    ctx.lineTo(canvas.width - 10, canvas.height - 50);
                    ctx.stroke();
                    ctx.fillStyle = 'white'
                    ctx.lineWidth = 0;
                    ctx.beginPath();
                    ctx.moveTo((canvas.width - 308) / 2 - 10, canvas.height - 64);
                    ctx.lineTo((canvas.width - 308) / 2 + 320, canvas.height - 64);
                    ctx.lineTo((canvas.width - 308) / 2 + 320, canvas.height - 46);
                    ctx.lineTo((canvas.width - 308) / 2 - 10, canvas.height - 46);
                    ctx.lineTo((canvas.width - 308) / 2 - 10, canvas.height - 64);
                    ctx.fill();
                    var code_title = '长按二维码识别查看商品';
                    ctx.fillStyle = '#808080';
                    ctx.font = '28px Helvetica';
                    ctx.fillText(code_title, (canvas.width - 308) / 2, canvas.height - 64);
                    var image = new Image();
                    image.setAttribute('crossOrigin', 'anonymous');
                    image.src = canvas.toDataURL("img/jpeg");
                    $(".imgData").attr("background", "white");
                    $(".imgData").attr("src", image.src);
                    $(".imgData").show();

                    if ($('.imgData').attr('src') != "") {
                        $('.image_loading').hide();
                        $('.image_show').show();
                        $('.am-icon-close').show();
                    }
                }
            }
        }
    </script>
</body>
</html>